<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://zlzkj.com/tags" prefix="z" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>折线趋势分析</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        .wr_echarts_bar{
            padding:9px 5px 10px 0;
            height:auto;
            float: left;
            margin: 0;
        }
        .wr_echarts_bar_border{
            box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 1);
            border-radius: 2px;
            background-color: #ffffff;
            padding:9px 5px 10px 0;
            margin-bottom: 20px;
            height:350px;
            width:100%;
            position: relative;
        }
        .wr_echarts_bar_show{
            height:100%;
            width:100%;
            position: absolute;
        }
    </style>
</head>
<body>
	<div class="templatemo-content col-1 light-gray-bg">
	    <div class="templatemo-content-container">
	        <div class="templatemo-content-widget no-padding">
	            <div class="zlzkj_item_content table-responsive">
	            	<div class="modal-header">
                    	<div class="text-info"><p>能源消耗监控</p></div>
                	</div>
                	<div class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
                		<div class="wr_echarts_bar col-sm-12 col-xs-12 col-md-12 col-lg-12">
                			<button type="button" class="btn btn-success" id="btn_line">水</button>
                			<button type="button" class="btn btn-default" id="btn_bar">电</button>
                			<button type="button" class="btn btn-default" id="btn_pie">气</button>
                		</div>
                		<div class="wr_echarts_bar_border col-sm-12 col-xs-12 col-md-12 col-lg-12">
                			<div id="echarts_bar_show" class="wr_echarts_bar_show col-sm-12 col-xs-12 col-md-12 col-lg-12"></div>
                		</div>
                	</div>
	            </div>
	        </div>
	    </div>
	</div>
	
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('echarts_bar_show'));
	 // 第一个图 水
	var option = {
	        title: {
	            text: '2017-2018年鼎力水能消耗'
	        },
	        tooltip: {},
	        legend: {
	            data:['2017年','2018年']
	        },
	        xAxis: {
	        	data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
	        	show: true,
	        },
	        yAxis: {
	        	show: true,
	        },
	        series: [{
	            name: '2017年',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#5CB85C' } },
	            data: ['15', '65', '89', '45', '21', '74', '59', '88', '45', '65', '78', '99']
	        },{
	            name: '2018年',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#87CEFA' } },
	            data: ['22', '78', '77', '66', '74', '55', '65', '84', '98', '75', '88', '101']
	        }]
	};
	
	/* 第二个图  电   */
	var option2 = {
	        title: {
	            text: '2017-2018年鼎力电能消耗'
	        },
	        tooltip: {},
	        legend: {
	            data:['2017年','2018年']
	        },
	        xAxis: {
	        	data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
	        	show: true,
	        },
	        yAxis: {
	        	show: true,
	        },
	        series: [{
	            name: '2017年',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#5CB85C' } },
	            data: ['51', '64', '88', '66', '75', '31', '21', '15', '45', '31', '22', '16']
	        },{
	            name: '2018年',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#87CEFA' } },
	            data: ['31', '32', '35', '37', '39', '45', '51', '47', '67', '55', '58', '71']
	        }]
	};
	
	/* 第二个图  气   */
	var option3 = {
	        title: {
	            text: '2017-2018年鼎力气能消耗'
	        },
	        tooltip: {},
	        legend: {
	            data:['2017年','2018年']
	        },
	        xAxis: {
	        	data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
	        	show: true,
	        },
	        yAxis: {
	        	show: true,
	        },
	        series: [{
	            name: '2017年',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#5CB85C' } },
	            data: ['34', '55', '54', '65', '88', '67', '78', '94', '45', '67', '87', '67']
	        },{
	            name: '2018年',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#87CEFA' } },
	            data: ['15', '34', '67', '89', '75', '45', '55', '67', '45', '75', '89', '76']
	        }]
	};
	
	myChart.setOption(option, true);
	window.addEventListener("resize",function(){
	myChart.resize();
	});
	
	//点击水
	$("#btn_line").click(function () {
		$('#btn_line').removeClass();
		$('#btn_bar').removeClass(); 
		$('#btn_pie').removeClass();
		$(this).addClass("btn btn-success");
		$('#btn_bar').addClass("btn btn-default");
		$('#btn_pie').addClass("btn btn-default");
		
		myChart.setOption(option, true);

	});
	
	//点击电
	$("#btn_bar").click(function () {
		$('#btn_line').removeClass();
		$('#btn_bar').removeClass(); 
		$('#btn_pie').removeClass();
		$(this).addClass("btn btn-success");
		$("#btn_line").addClass("btn btn-default");
		$('#btn_pie').addClass("btn btn-default");
		
		myChart.setOption(option2, true);
	});
	
	//点击气
	$("#btn_pie").click(function () {
		$('#btn_line').removeClass();
		$('#btn_bar').removeClass(); 
		$('#btn_pie').removeClass();
		$(this).addClass("btn btn-success");
		$('#btn_bar').addClass("btn btn-default");
		$("#btn_line").addClass("btn btn-default");
		
		myChart.setOption(option3, true);
	});
</script>
</body>
</html>